

<template>
  <div>
    <RouterLink to="/">首页</RouterLink>
  <RouterLink to="/about">关于</RouterLink> 
  <RouterLink to="/news">新闻</RouterLink>
  <RouterLink to="/sport">体育</RouterLink>
  <RouterLink to="/demo1">语法</RouterLink>
  </div>
<div>

  <table class="table table-bordered">
<tbody>
  <tr>
    <td>Id</td>
    <td>姓名</td>
    <td>年龄</td>
    <td>性别</td>
    <td>是否结婚</td>
    <td>操作</td>
  </tr>

  <tr v-for="item in arrObj" :key="item.id">
    <td>{{item.id}}</td>
    <td>{{item.name}}</td>
    <td>{{item.age}}</td>
    <td>{{item.sex}}</td>
    <td>{{item.marry}}</td>
    <td><input type="button" value="修改"  class="btn btn-success"></td>
  </tr>

</tbody>
  </table>
</div>
</template>

<script setup lang="ts">
import {  ref,reactive} from 'vue';
let arrObj= reactive([

    { id:1,name:'张三',age:18,sex: "男" ,marry:false},
    { id:2,name:'燕飞',age:20 ,sex: "女" ,marry:false},
    { id:3,name:'孔明',age:35,sex: "男" ,marry:false},
    { id:4,name:'貂蝉',age:17 ,sex: "女" ,marry:false},
    { id:5,name:'孔融',age:23 ,sex: "男" ,marry:false},


])
</script>

<style scoped>
a{ margin-right: 20px;}
</style>
